<template>
  <div>
    <el-form ref="loginForm"
             v-loading="loading"
             element-loading-text="正在登录..."
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)"
             :model="form"
             :rules="rules"
             label-width="80px"
             class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label= "账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label= "密码" prop="password">
        <el-input type="password" placeholder= "请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input type="text"  v-model="form.code" placeholder="点击图片更换验证码" style="width: 170px;margin-right: 5px"></el-input>
        <img v-bind:src="verifyCodeUrl" @click="updateVerifyCode">
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="checked" class="login-Remember">记住我</el-checkbox>&nbsp;
        <el-button type="primary" v-on:click="onSubmit('loginForm')" style="width: 120px">登录</el-button>
      </el-form-item>
    </el-form>

<!--    &lt;!&ndash;登陆验证提示框&ndash;&gt;-->
<!--    <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">-->
<!--      <span>请输入账号、密码和验证码！</span>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
<!--    </span>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>

  export default {
    name: "Login",
    data() {
      return {
        verifyCodeUrl: '/verifyCode?time='+new Date(),
        form: {
          username: '',
          password: '',
          code: ''
        },
        loading: false,
        checked: true,
        //表单验证，需要在el-form-item 元素中增加prop 属性
        rules: {
          username: [
            {required: true, message: " 账号不可为空", trigger: 'blur'}
          ],
          password: [
            {required: true, message: " 密码不可为空 ", trigger: 'blur'}
          ],
          code: [
            {required: true, message: " 验证码不可为空 ", trigger: 'blur'}
          ]
        }
        // //对话框显示和隐藏
        // dialogVisible: false
      }
    },
    methods: {
       //刷新验证码
        updateVerifyCode(){
            this.verifyCodeUrl = '/verifyCode?time='+new Date();
        },
      //点击登录按钮事件
        onSubmit(formName) {
          //为表单绑定验证功能
            this.$refs [formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    //发数据给后端
                    this.postRequest("/login",this.form).then(resp =>{
                        this.loading = false;
                        if(resp){
                            //存储用户token
                            const tokenStr = resp.obj.tokenHead+resp.obj.token;
                            // console.log("tokenStr:"+tokenStr);
                            window.sessionStorage.setItem('tokenStr',tokenStr);
                            //页面跳转
                            let path = this.$route.query.redirect;
                            this.$router.replace((path == '/login' || path == undefined) ? '/home' : path);
                        }else{
                          this.verifyCodeUrl = '/verifyCode?time='+new Date();
                        }
                   })
               }else {
                    this.$message.error('请输入所有字段');
                    return false;
                }
          });
        }
     }
  }
</script>


<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 380px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
  .login-Remember{
    text-align:left;
    margin: 0px 0px 15px 0px;
}
</style>
